<template>
  <div class="map">
    <!-- <img src="/loge.webp" /> -->
    <ECharts
      class="geo-map"
      :option="option"
      autoresize
      @mouseover="onMouseover"
      @mouseout="onMouseout"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import * as echarts from "echarts";
import chinaJson from "@/assets/map/china.json"; // 地图数据文件（需自行获取）

// 注册地理坐标系
echarts.registerMap("China", chinaJson);

//往父元素发送每个省的数据
const emit = defineEmits(["onChangeData"]);

//鼠标进入地图每个省份的监听事件
const onMouseover = (e) => {
  //不触发南海诸岛
  if (e.data.name === "南海诸岛") return;
  emit("onChangeData", e.data);
};

const onMouseout = (e) => {
  //不触发南海诸岛
  if (e.data.name === "南海诸岛") return;
  emit("onChangeData", mouseoutData.value);
};

// 成就   achievement
// 科学家 scientist
// 著作   book
// 文化   culture

// 模拟数据（需与地图中的省份名称严格一致）
const geoData = ref([
  // 直辖市
  {
    name: "北京市",
    value: 95,
    achievement: 20,
    scientist: 55,
    book: 48,
    culture: 39,
    img: "",
    text: "",
  }, // 图片必须放在public目录里才能被访问到
  {
    name: "上海市",
    value: 88,
    achievement: 30,
    scientist: 85,
    book: 458,
    culture: 139,
  },
  {
    name: "天津市",
    value: 78,
    achievement: 60,
    scientist: 555,
    book: 485,
    culture: 339,
  },
  {
    name: "重庆市",
    value: 72,
    achievement: 280,
    scientist: 525,
    book: 418,
    culture: 349,
  },

  // 省份（按地理区域分组）
  // 东北地区
  {
    name: "黑龙江省",
    value: 68,
    achievement: 240,
    scientist: 455,
    book: 448,
    culture: 839,
    img: "",
    text: "",
  },
  {
    name: "吉林省",
    value: 65,
    achievement: 280,
    scientist: 515,
    book: 48,
    culture: 319,
  },
  {
    name: "辽宁省",
    value: 70,
    achievement: 240,
    scientist: 555,
    book: 484,
    culture: 539,
  },

  // 华北地区
  {
    name: "河北省",
    value: 75,
    achievement: 720,
    scientist: 855,
    book: 948,
    culture: 349,
  },
  {
    name: "山西省",
    value: 63,
    achievement: 270,
    scientist: 585,
    book: 498,
    culture: 349,
  },
  {
    name: "内蒙古自治区",
    value: 60,
    achievement: 208,
    scientist: 555,
    book: 428,
    culture: 319,
  },

  // 华东地区
  {
    name: "江苏省",
    value: 85,
    achievement: 207,
    scientist: 585,
    book: 248,
    culture: 319,
  },
  {
    name: "浙江省",
    value: 82,
    achievement: 240,
    scientist: 575,
    book: 438,
    culture: 329,
  },
  {
    name: "安徽省",
    value: 73,
    achievement: 210,
    scientist: 155,
    book: 481,
    culture: 339,
  },
  {
    name: "福建省",
    value: 77,
    achievement: 420,
    scientist: 555,
    book: 468,
    culture: 349,
  },
  {
    name: "江西省",
    value: 69,
    achievement: 270,
    scientist: 755,
    book: 488,
    culture: 399,
  },
  {
    name: "山东省",
    value: 80,
    achievement: 250,
    scientist: 595,
    book: 848,
    culture: 739,
  },

  // 华中地区
  {
    name: "河南省",
    value: 76,
    achievement: 270,
    scientist: 655,
    book: 848,
    culture: 379,
  },
  {
    name: "湖北省",
    value: 74,
    achievement: 240,
    scientist: 554,
    book: 498,
    culture: 356,
  },
  {
    name: "湖南省",
    value: 71,
    achievement: 280,
    scientist: 551,
    book: 487,
    culture: 394,
  },

  // 华南地区
  {
    name: "广东省",
    value: 90,
    achievement: 280,
    scientist: 455,
    book: 468,
    culture: 39,
  }, // 经济大省数值较高
  {
    name: "广西壮族自治区",
    value: 67,
    achievement: 204,
    scientist: 525,
    book: 468,
    culture: 139,
  },
  {
    name: "海南省",
    value: 30,
    achievement: 270,
    scientist: 585,
    book: 438,
    culture: 359,
  },

  // 西南地区
  {
    name: "四川省",
    value: 75,
    achievement: 210,
    scientist: 555,
    book: 488,
    culture: 339,
  },
  {
    name: "贵州省",
    value: 64,
    achievement: 230,
    scientist: 515,
    book: 448,
    culture: 739,
  },
  {
    name: "云南省",
    value: 66,
    achievement: 280,
    scientist: 565,
    book: 428,
    culture: 392,
  },
  {
    name: "西藏自治区",
    value: 58,
    achievement: 780,
    scientist: 575,
    book: 489,
    culture: 349,
  }, // 高原地区数值较低

  // 西北地区
  {
    name: "陕西省",
    value: 70,
    achievement: 210,
    scientist: 755,
    book: 748,
    culture: 739,
  },
  {
    name: "甘肃省",
    value: 63,
    achievement: 720,
    scientist: 585,
    book: 458,
    culture: 398,
  },
  {
    name: "青海省",
    value: 59,
    achievement: 920,
    scientist: 556,
    book: 486,
    culture: 389,
  },
  {
    name: "宁夏回族自治区",
    value: 61,
    achievement: 210,
    scientist: 557,
    book: 478,
    culture: 359,
  },
  {
    name: "新疆维吾尔自治区",
    value: 65,
    achievement: 220,
    scientist: 545,
    book: 468,
    culture: 379,
  },
  // { name: "南海诸岛", value: 65 },改成透明的

  // 特别行政区
  {
    name: "香港特别行政区",
    value: 83,
    achievement: 270,
    scientist: 558,
    book: 418,
    culture: 349,
  }, // 国际金融中心
  {
    name: "澳门特别行政区",
    value: 79,
    achievement: 260,
    scientist: 555,
    book: 468,
    culture: 339,
  },
  {
    name: "台湾省",
    value: 73,
    achievement: 220,
    scientist: 755,
    book: 484,
    culture: 398,
  }, // 根据业务需求决定是否包含
]);

//计算全国科学成就数量
const nationalAchievement = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.achievement,
    0
  )
);

//计算全国科学成就数量
const nationalScientist = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.scientist,
    0
  )
);

//计算全国科学成就数量
const nationalBook = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.book,
    0
  )
);

//计算全国科学成就数量
const nationalCulture = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.culture,
    0
  )
);

//鼠标离开地图每个省份的监听事件
const mouseoutData = ref({
  isNational: true,
  nationalAchievement: nationalAchievement.value,
  nationalScientist: nationalScientist.value,
  nationalBook: nationalBook.value,
  nationalCulture: nationalCulture.value,
});
//已进入就往父级发送数据
onMounted(() => {
  emit("onChangeData", mouseoutData.value);
});
// 主配置项
const option = ref({
  // title: {
  //   text: "中国地理坐标系地图",
  //   // subtext: "基于geo组件实现",
  //   left: "center",
  // },

  // 地理坐标系配置（核心）
  geo: [
    // ====================== 第一层：基础地图层 ======================
    {
      map: "China", // 使用已注册的"China"地图数据
      aspectScale: 1, // 地图宽高比例保持1:1
      // zoom: 1.2, // 初始缩放系数120%
      layoutCenter: ["50%", "51%"], // 地图中心点位于容器中心
      layoutSize: "100%", // 地图尺寸占满容器
      roam: false, // 禁用拖拽缩放操作
      label: { show: false }, // 隐藏省份名称标签

      // /&zwnj;** 核心样式配置 **&zwnj;/
      itemStyle: {
        // areaColor: {
        //   // 区域填充色（线性渐变）
        //   type: "linear",
        //   x: 1200,
        //   y: 0,
        //   x2: 0,
        //   y2: 0, // 渐变方向从右到左
        //   colorStops: [
        //     { offset: 0, color: "rgba(255,235,190,1)" }, // 右侧深蓝
        //     { offset: 1, color: "rgba(255,235,190,0.1)" }, // 左侧浅蓝
        //   ],
        // },
        borderColor: "rgba(0,0,0,0.5)", // 边界线颜色（浅青）
        borderWidth: 1, // 边界线粗细0.8像素
        shadowColor: "rgba(255,235,190)", // 阴影颜色（蓝紫色）
        // shadowBlur: 10, // 阴影模糊半径10px
        // shadowOffsetY: 5, // 阴影垂直偏移5px
        shadowColor: "rgba(0,0,0,1)", // 紫色阴影
        // shadowOffsetY: 10, // 阴影垂直偏移
        // shadowBlur: 10, // 大范围模糊
      },

      // /&zwnj;** 特殊区域覆盖 **&zwnj;/
      regions: [
        {
          name: "南海诸岛", // 指定特殊区域名称
          itemStyle: {
            areaColor: "rgba(0,0,0,0)", // 深色背景覆盖该区域
          },
        },
      ],

      emphasis: {
        label: { show: true, color: "#000" },
        itemStyle: {
          areaColor: "rgba(255,235,190)",
          borderWidth: 2,
          // ===== 新增悬浮效果 =====
          shadowBlur: 20, // 增大阴影模糊度
          shadowOffsetY: 10, // 增加垂直偏移
          shadowColor: "rgba(0,0,0,0.3)", // 加深阴影颜色
          borderColor: "rgba(255,235,200)", // 金色边框
          // 添加悬浮位移效果（通过相对定位实现）
          position: "relative",
          top: -5, // 上移5像素
        },
      },
    },

    // ====================== 第二层：立体阴影层 ======================
    {
      map: "China", // 复用地图数据
      zlevel: -1, // 图层层级低于主地图
      aspectScale: 1,
      // zoom: 1.2,
      layoutCenter: ["50%", "54%"], // 垂直偏移1%产生错位效果
      layoutSize: "100%",
      roam: false,
      silent: true, // 禁用交互事件

      // /&zwnj;** 阴影层样式 **&zwnj;/
      itemStyle: {
        areaColor: "rgba(0,0,0,0.5)", // 半透明深色背景
        borderColor: "rgba(0,0,0,1)", // 高亮边界线
        borderWidth: 1,
        shadowColor: "rgba(0,0,0,0.5)", // 紫色阴影
        shadowOffsetY: -20, // 阴影垂直偏移
        // shadowBlur: 10, // 大范围模糊
      },

      // /&zwnj;** 隐藏特定区域 **&zwnj;/
      regions: [
        {
          name: "南海诸岛",
          show: false, // 完全隐藏该区域
          itemStyle: {
            normal: { opacity: 0 }, // 透明度设为0
          },
          label: { show: false }, // 隐藏标签
        },
      ],

      // emphasis: {
      //   itemStyle: {
      //     shadowBlur: 25, // 同步增强阴影层效果
      //     shadowOffsetY: 15,
      //   },
      // },
    },

    // // ====================== 第三层：深度阴影层 ======================
    // {
    //   map: "China",
    //   zlevel: -2, // 最底层
    //   aspectScale: 1,
    //   // zoom: 1.2,
    //   layoutCenter: ["50%", "52%"], // 继续增加垂直偏移
    //   layoutSize: "100%",
    //   roam: false,
    //   silent: true,

    //   // /&zwnj;** 底层阴影样式 **&zwnj;/
    //   itemStyle: {
    //     areaColor: "rgba(255,235,190,0.5)", // 半透明深色背景
    //     borderColor: "rgba(0,0,0,0.1)", // 深蓝色边界线
    //     borderWidth: 5, // 更粗的边界线
    //     shadowColor: "rgba(255,235,190,1)", // 深蓝色阴影
    //     shadowOffsetY: 15, // 更大的垂直偏移
    //     shadowBlur: 10, // 中等模糊度
    //   },

    //   // /&zwnj;** 同样隐藏南海诸岛 **&zwnj;/
    //   regions: [
    //     {
    //       name: "南海诸岛",
    //       show: false,
    //       itemStyle: { normal: { opacity: 0 } },
    //       label: { show: false },
    //     },
    //   ],

    //   // emphasis: {
    //   //   itemStyle: {
    //   //     shadowBlur: 15,
    //   //     shadowOffsetY: 25,
    //   //   },
    //   // },
    // },
    // // ====================== 第4层：深度阴影层 ======================

    // {
    //   map: "China",
    //   zlevel: -3, // 最底层
    //   aspectScale: 1,
    //   // zoom: 1.2,
    //   layoutCenter: ["50%", "53%"], // 继续增加垂直偏移
    //   layoutSize: "100%",
    //   roam: false,
    //   silent: true,

    //   // /&zwnj;** 底层阴影样式 **&zwnj;/
    //   itemStyle: {
    //     areaColor: "rgba(255,235,190,0.5)", // 半透明深色背景
    //     borderColor: "rgba(0,0,0,0.1)", // 深蓝色边界线
    //     borderWidth: 5, // 更粗的边界线
    //     shadowColor: "rgba(255,235,190,1)", // 深蓝色阴影
    //     shadowOffsetY: 15, // 更大的垂直偏移
    //     shadowBlur: 10, // 中等模糊度
    //   },

    //   // /&zwnj;** 同样隐藏南海诸岛 **&zwnj;/
    //   regions: [
    //     {
    //       name: "南海诸岛",
    //       show: false,
    //       itemStyle: { normal: { opacity: 0 } },
    //       label: { show: false },
    //     },
    //   ],

    //   // emphasis: {
    //   //   itemStyle: {
    //   //     shadowBlur: 15,
    //   //     shadowOffsetY: 25,
    //   //   },
    //   // },
    // },
    // // ====================== 第5层：深度阴影层 ======================

    // {
    //   map: "China",
    //   zlevel: -4, // 最底层
    //   aspectScale: 1,
    //   // zoom: 1.2,
    //   layoutCenter: ["50%", "54%"], // 继续增加垂直偏移
    //   layoutSize: "100%",
    //   roam: false,
    //   silent: true,

    //   // /&zwnj;** 底层阴影样式 **&zwnj;/
    //   itemStyle: {
    //     areaColor: "rgba(255,235,190,0.5)", // 半透明深色背景
    //     borderColor: "rgba(0,0,0,0.1)", // 深蓝色边界线
    //     borderWidth: 5, // 更粗的边界线
    //     shadowColor: "rgba(255,235,190,1)", // 深蓝色阴影
    //     shadowOffsetY: 10, // 更大的垂直偏移
    //     shadowBlur: 10, // 中等模糊度
    //   },

    //   // /&zwnj;** 同样隐藏南海诸岛 **&zwnj;/
    //   regions: [
    //     {
    //       name: "南海诸岛",
    //       show: false,
    //       itemStyle: { normal: { opacity: 0 } },
    //       label: { show: false },
    //     },
    //   ],

    //   // emphasis: {
    //   //   itemStyle: {
    //   //     shadowBlur: 15,
    //   //     shadowOffsetY: 25,
    //   //   },
    //   // },
    // },
    // ====================== 第6层：深度阴影层 ======================

    // {
    //   map: "China",
    //   zlevel: -5, // 最底层
    //   aspectScale: 1,
    //   // zoom: 1.2,
    //   layoutCenter: ["50%", "55%"], // 继续增加垂直偏移
    //   layoutSize: "100%",
    //   roam: false,
    //   silent: true,

    //   // /&zwnj;** 底层阴影样式 **&zwnj;/
    //   itemStyle: {
    //     areaColor: "rgba(255,235,190,0.5)", // 半透明深色背景
    //     borderColor: "rgba(0,0,0,0.1)", // 深蓝色边界线
    //     borderWidth: 5, // 更粗的边界线
    //     shadowColor: "rgba(255,235,190,1)", // 深蓝色阴影
    //     // shadowOffsetY: 15, // 更大的垂直偏移
    //     // shadowBlur: 10, // 中等模糊度
    //   },

    //   // /&zwnj;** 同样隐藏南海诸岛 **&zwnj;/
    //   regions: [
    //     {
    //       name: "南海诸岛",
    //       show: false,
    //       itemStyle: { normal: { opacity: 0 } },
    //       label: { show: false },
    //     },
    //   ],

    //   // emphasis: {
    //   //   itemStyle: {
    //   //     shadowBlur: 15,
    //   //     shadowOffsetY: 25,
    //   //   },
    //   // },
    // },
  ],

  // 视觉映射组件
  visualMap: {
    // type: "continuous", // 连续型映射
    type: "piecewise", // 分段型视觉映射
    min: 0,
    max: 100,
    left: "right",
    top: "center",
    text: ["高", "低"],
    calculable: true,
    inRange: {
      color: ["#eee", "rgba(255,235,190)"], // ffe1cc颜色渐变
    },
    // 关联geo组件中的数据
    seriesIndex: [0],
    // 修改背景和阴影配置
    //backgroundColor: "rgba(255,255,255,0.92)", // 提高不透明度到92%
    borderRadius: 8,
    padding: [10, 15], // 增加左右边距
    borderWidth: 0,
    textStyle: {
      color: "#3c3c3c", // 使用更深文字颜色
      fontSize: 12,
      fontWeight: "bold", // 增加文字权重
    },
    itemStyle: {
      borderWidth: 1,
      borderColor: "rgba(0,0,0,0.12)", // 更柔和的边框颜色
    },
  },

  // 数据系列配置
  series: [
    {
      type: "map", // 依然需要map系列配合
      coordinateSystem: "geo", // 指定使用geo坐标系
      geoIndex: 0, // 关联geo配置项的索引
      data: geoData.value, // 绑定数据源
      // 数据项样式（通过visualMap控制颜色）
      itemStyle: {
        borderColor: "#666",
        borderWidth: 0.5,
      },
      emphasis: {
        itemStyle: {
          borderWidth: 3,
          borderColor: "#ffd700",
          // 添加过渡动画
          transition: "all 0.3s",
          // 添加发光效果
          glow: {
            color: "rgba(255,215,0,0.5)",
            blur: 20,
          },
        },
      },

      itemStyle: {
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0,0,0,0)", //完全透明
              borderColor: "#666", //保留边框
            },
          },
        ],
      },
    },
  ],

  // 提示框配置
  tooltip: {
    trigger: "item",

    formatter: (params) => {
      const data = geoData.value.find((d) => d.name === params.name);
      console.log(data);
      if (params.data.name === "南海诸岛") return; //进入南海诸岛不往下执行
      return `
            <div style="max-width: 120px">
                <div style="display: flex; align-items: center">
                  <img style="width: 30px; height: 30px; margin-right: 5px; " src="/public/map/image/shandong.png"/>
                  <text style="font-size: 18px; color: #1890ff">孔子</text>
                </div>
                <hr style="margin: 5px 0; border-color: #666" />
                <div
                  style="
                    max-width: 100%;
                    word-break: break-all;
                    overflow-wrap: break-word;
                    white-space: normal;
                    min-width: 0;
                    line-break: anywhere;
                  "
                  >
                  墨子：提出“小孔成像”光学原理，发现杠杆平衡条件，定义“圆，一中同长也”等几何概念，被尊为“科圣”。
                </div>
            </div>
        `;
    },
  },
});
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  // background: #000;
  .geo-map {
    width: 100%;
    height: 100%;
  }
}
</style>
